;(function(window, document, $) {
  $.fn.tabs = function(options) {
    return this.each(function(ele){
      var nowEle = $(this);
      var tabBar = nowEle.find('.tab-bar');
      var allTab = nowEle.find('.tab');
      function init() {
        var active = nowEle.find('.active');
        trigger(active);
      }
      function trigger(tab, evt) {
        var tabNum = allTab.length;
        var index = allTab.index(tab);
        var value = tab.data('value');
        allTab.removeClass('active');
        tab.addClass('active');
        tabBar.css('left', ((100 / tabNum) * index) + '%');
        options.tabChange(value, index, tab.context, evt);
      }
      allTab.on('click', function(evt) {
        var $this = $(this);
        if (!$this.hasClass('active')) {
          trigger($this, evt);
        }
      });
      init();
    });
  }
})(window, document, $)